.modal-from {
    padding: 24px 16px;

    .icon-adjustments {
        cursor: pointer;
        width: 24px;
        &:hover {
            color: var(--Colors-Use-Main-Primary);
        }
    }
}

.yakit-extract-regular-editor {
    padding: 24px 16px;
    min-height: 448px;

    .yakit-editor {
        height: 368px;
        margin-bottom: 8px;
    }
}

.yakit-editor-regexp {
    // margin-top: 8px;

    .yakit-editor-regexp-tag {
        width: fit-content;
        max-width: 100%;
        // padding: 4px 6px 4px 8px;
        margin-right: 0;
        display: flex;
        background: var(--Colors-Use-Neutral-Bg-Hover);
        border: 1px solid var(--Colors-Use-Neutral-Border);
        border-radius: 4px;
        font-size: 12px;
        align-items: center;

        .yakit-editor-regexp-value {
            word-break: break-all;
            color: var(--Colors-Use-Neutral-Text-1-Title);
            overflow: hidden;
            text-overflow: ellipsis;
            // display: -webkit-box;
            // -webkit-line-clamp: 3;
            // -webkit-box-orient: vertical;
        }

        .yakit-editor-icon {
            margin-left: 8px;
            user-select: none;
            display: inline-flex;
            align-items: center;
            height: 22px;
            color: var(--Colors-Use-Main-Primary);

            svg {
                width: 16px;
                height: 16px;

                &:hover {
                    color: var(--Colors-Use-Main-Hover);
                }

                &:active {
                    color: var(--Colors-Use-Main-Pressed);
                }
            }
        }
    }

    .yakit-editor-text-area {
        display: flex;

        :global {
            .ant-input {
                border-radius: 4px;
                min-height: 24px !important;
                max-height: 72px !important;
                padding: 0px 8px;
                word-break: break-all;
            }
        }

        .yakit-editor-btn {
            margin-left: 8px;
            display: flex;
            font-weight: 400;
            font-size: 12px;
            color: var(--Colors-Use-Neutral-Text-1-Title);
            align-items: center;
            height: 24px;
            user-select: none;

            .cancel-btn {
                width: 24px;
                cursor: pointer;

                &:hover {
                    color: var(--Colors-Use-Main-Hover);
                }

                &:active {
                    color: var(--Colors-Use-Main-Pressed);
                }
            }

            .save-btn {
                color: var(--Colors-Use-Main-Primary);
                width: 24px;
                cursor: pointer;

                &:hover {
                    color: var(--Colors-Use-Main-Hover);
                }

                &:active {
                    color: var(--Colors-Use-Main-Pressed);
                }
            }
        }
    }
}

.yakit-extra-http-select {
    .yakit-extra-http-select-heard {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;

        :global {
            .anticon {
                height: 16px;
            }
        }

        .extra-tip {
            color: var(--Colors-Use-Neutral-Disable);
            font-weight: 400;

            .number {
                color: var(--Colors-Use-Main-Primary);
                margin: 0 4px;
            }
        }
    }

    .http-tags {
        border: 1px solid var(--Colors-Use-Neutral-Border);
        border-radius: 4px;
        padding: 4px;
        padding-bottom: 0;

        .tag-item {
            margin-bottom: 4px;
        }
    }
}

.http-heard-form {
    padding: 24px 16px;
}
